<template>
    <div>
        <div v-if="list.length > 0">
            <div class="task" v-for="(item, index) in list" :key="index" >
                <div class="cont" @click="toUrl(item.id,item.rec_id)">
                    <div class="ava">
                        <img
                                v-if="item.pushAvatar"
                                :src="item.pushAvatar"
                                class="img-ava"
                        /><img
                            v-else
                            src="~@/assets/list/person.png"
                            class="img-ava"
                    />
                    </div>

                    <div>
                        <div class="title">
                            {{item.title}}
                        </div>
                        <div class="desc">
                            {{item.synopsis}}
                        </div>
                        <div class="user-dete">
                            <div class="user">
                                <img src="~@/assets/list/person.png" class="u-img" />
                                <div class="n1">{{item.pushName}}</div>
                            </div>

                            <div class="date" v-if="item.end_time">
                                <img src="~@/assets/list/time.png" class="u-img" />
                                <div class="str">{{item.end_time}}</div>
                            </div>
                            <div class="date" v-if="item.type == 2">
                                <img src="~@/assets/list/integral.png" class="u-img" />
                                <div class="inte">{{item.integral}}积分</div>
                            </div>
                            <div class="date" v-if="item.type == 1">
                                <img src="~@/assets/list/integral.png" class="u-img" />
                                <div class="inte">{{item.money}}现金</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dfx">
                    <div class="dfx"
                         v-if="department_id == 0 || item.ad_id == admin_id">
                        <div class="edit"
                             @click="edits(item.id)">编辑</div>
                        <div class="edit"
                             @click="deleEnd(index)">删除</div>
                        <div class="edit"
                             @click="deletesEnd(index)">结束</div>
                    </div>
                    <div v-else>
                        <div class="lq"
                             v-if="type == 1 && item.recStatus == 0"
                             @click="addTask(item.id,index)">领取任务</div>
                        <div class="jx"
                             v-if="item.recStatus == 1 && item.is_del != 3">进行中</div>
                        <div class="tg"
                             v-if="item.recStatus == 3">已通过</div>
                        <div class="js"
                             v-if="type==4">已结束</div>
                        <div class="jxz"
                             v-if="type == 2"
                             @click="giveup(item.rec_id,index)">放弃任务</div>
                        <div class="tb"
                             v-if="type == 5">同步</div>
                    </div>

                </div>
            </div>
        </div>
        <div v-else>
            <div class="list-none">
                <div class="list-img">
                    <img src="~@/assets/list/list-none.png" class="l-img"/>
                </div>
                <div class="l-str">~暂无数据~</div>
            </div>
        </div>
    </div>
</template>

<script>

    import {useRouter} from "vue-router";
    import {reactive,onMounted, defineProps} from "vue";
    import { endTask } from "@/request/api";
    import { ElMessageBox,ElMessage } from 'element-plus'
    const state = reactive({

    })
    export default {
        props: {
            type: {
                default: 0
            }
            ,list : {
                default: []
            },
            total: {
                default: 0
            },
            department_id: {
                default: -1
            },
            admin_id: {
                default: 0
            }
        },
        name: "task",
        emits: ['detailurl', 'deletesEnd', 'deleEnd'],
        data: () => ({
            circleUr: ''
        }),
        setup(props,context) {
            if(typeof(props)=='undefined'){
               return false
            }
            const  toUrl = (id,rec_id) => {
                let title = '基础知识任务详情'
                context.emit('detailurl',id,title,rec_id);
            }
            const addTask = (id,index) => {
                context.emit('addtask',id,index);
            }
            //放弃
            const giveup = (id,index) => {
                context.emit('giveup',id,index);
            }
            const router = useRouter();
            router.options.isAddDynamicMenuRoutes = false;
            //结束任务
            const deletesEnd = (index) => {
                let id = props.list[index].id
                ElMessageBox.confirm("确认后将结束任务哦", "您确定要结束该任务吗?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    let param = {
                        task_id : id,
                        is_del: 3
                    }
                    endTask(param).then(res=>{
                        if(res.ret == 200){
                            ElMessage.success({
                                message: '操作成功',
                                type: 'success'
                            })
                            setTimeout(function () {
                                context.emit('deletesEnd')
                                // props.list.splice(index,1)
                            },1000)
                        }
                    });
                }).catch(() => {

                });
            }
            const synchronization = (id) => {
                let types = 1
                let path = "user-copy-task-detai-67";
                router.push({ name: path ,query: { id , types}});
            }
            const deleEnd = (index) => {
                let id = props.list[index].id
                ElMessageBox.confirm("删除任务将不可恢复", "您确定要删除该任务吗?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    let param = {
                        task_id: id,
                        is_del: 1
                    }
                    endTask(param).then(res => {
                        if (res.ret == 200) {
                            ElMessage.success({
                                message: '操作成功',
                                type: 'success'
                            })
                            setTimeout(function () {
                                context.emit('deleend', index)
                            }, 1000)
                        }
                    });
                }).catch(() => {

                })
            }
            const edits = (id) => {
              router.push({ name: "operate-release-22", query: { 'id': id } });
            }
            onMounted(() => {

            })
            return {
                toUrl,
                addTask,
                giveup,
                deletesEnd,
                deleEnd,
                edits,
                state,
                synchronization
            }
  }
}
</script>

<style lang="scss" scoped>
.task {
  display: flex;
  justify-content: space-between;
  padding-bottom: 25px;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 15px;
  .ava {
    margin-right: 20px;
  }
  .title {
    color: #45484d;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 7px;
  }
  .desc {
    color: #8a9099;
    font-size: 13px;
    padding-top: 5px;
    white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
    overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
    text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
    -o-text-overflow: ellipsis; /* 特定浏览器前缀 */
  }
  .cont {
    width: 60%;
    padding-top: 5px;
    display: flex;
    cursor: pointer;
  }
  .user {
    margin-top: 15px;
    display: flex;
  }
  .date {
    margin-top: 15px;
    display: flex;
    margin-left: 50px;
  }
  .u-img {
    width: 15px;
    height: 15px;
  }
  .n1 {
    font-size: 13px;
    color: #8a9099;
    margin-top: 1px;
    margin-left: 5px;
  }
  .str {
    font-size: 13px;
    color: #fb9180;
    margin-top: 1px;
    margin-left: 5px;
  }
  .red {
    font-size: 13px;
    color: red;
    margin-top: 1px;
    margin-left: 5px;
  }
  .user-dete {
    display: flex;
  }
  .int-img {
    width: 25px;
    height: 25px;
  }
  .price-cred {
    display: flex;
    margin-top: 8px;
    margin-left: 50px;
  }
  .inte {
    margin-left: 5px;
    color: #5c6066;
    font-size: 13px;
  }
  .buttom {
    margin-top: 22px;
  }
  .lq {
    color: white;
    background: #6c91ed;
    font-size: 12px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    height: 13px;
  }
  .edit {
    color: white;
    background: #0f0f10;
    font-size: 12px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    height: 13px;
    margin-left: 10px;
  }
  .jx {
    color: #6c91ed;
    background: white;
    font-size: 12px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 2px 6px 0px rgb(110 132 179 / 20%);
    text-align: center;
    height: 13px;
  }
  .js {
    color: #fb9180;
    background: white;
    font-size: 12px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    height: 13px;
    border: 1px solid #fb9180;
    box-shadow: 0px 2px 6px 0px rgb(110 132 179 / 20%);
  }
  .tg {
    color: #67c23a;
    background: white;
    font-size: 12px;
    padding: 10px;
    border-radius: 5px;
    height: 13px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #67c23a;
    box-shadow: 0px 2px 6px 0px rgb(110 132 179 / 20%);
  }
  .sh {
  }
  .lq:active {
    background: #99a9d0;
  }
  .dfx {
    display: flex;
    justify-content: space-between;
  }
  .jxz {
    color: #6c91ed;
    background: white;
    font-size: 12px;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 3px;
    text-align: center;
    border: 1px solid #6c91ed;
  }
  .tb {
    color: white;
    background: #fb8b79;
    font-size: 12px;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 3px;
    text-align: center;
    height: 15px;
  }
  .img-ava {
    width: 53px;
    height: 53px;
    border-radius: 50%;
  }
}
.list-none {
  text-align: center;
  margin-top: 30px;
  .l-str {
    margin-top: 15px;
    color: #929496;
    font-size: 15px;
  }
  .l-img {
    width: 200px;
  }
}
</style>
